<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>天下行租车</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <link rel="stylesheet" href="css/base.css">
</head>
<body>
<div id="app">
    <header>
        <div class="c900 flex">
            <a href="index.html"><h1>天下行汽车租赁平台</h1></a>
            <span class="flex">
                <a href="addCar.html">添加车辆</a>
                <a><el-avatar src="https://img1.baidu.com/it/u=2068393135,2936134418&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"></el-avatar></a>
                <a href="register.html">注册</a>
                <a href="login.html">登录</a>
            </span>
        </div>
    </header>
    <nav class="c900 flex" style="margin: 10px auto 0px">
        <div class="flex" style="justify-content: center;">
            <el-link :underline="false">宝马</el-link>
            <el-link :underline="false">奔驰</el-link>
            <el-link :underline="false">吉利</el-link>
            <el-link :underline="false">奇瑞</el-link>
            <el-link :underline="false">长安</el-link>
            <el-link :underline="false">别克</el-link>
            <el-link :underline="false">雪铁龙</el-link>
            <el-link :underline="false">标致</el-link>
            <el-link :underline="false">比亚迪</el-link>
            <el-link :underline="false">本田</el-link>
            <el-link :underline="false">丰田</el-link>
        </div>
        <el-input placeholder="搜索关键字" style="width: 250px">
            <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
    </nav>
    <main class="c900 flex" style="background-color: transparent; padding: 0px; justify-content: flex-start">
        <div class="car">
            <img src="https://img1.baidu.com/it/u=3526446978,2585459819&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500">
            <div>
                <div class="price">￥300<small>元/天</small></div>
                <el-rate v-model="rate"></el-rate>
                <p>丰田<br><small>卡罗拉</small></p>
                <a class="abtn" href="detail.html">租 赁</a>
            </div>
        </div>
        <div class="car">
            <img src="https://img0.baidu.com/it/u=4027132358,3910351501&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500">
            <div>
                <div class="price">￥400<small>元/天</small></div>
                <el-rate v-model="rate"></el-rate>
                <p>宝马<br><small>x5</small></p>
                <a class="abtn" href="detail.html">租 赁</a>
            </div>
        </div>
        <div class="car">
            <img src="https://img0.baidu.com/it/u=871710877,900942460&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500">
            <div>
                <div class="price">￥500<small>元/天</small></div>
                <el-rate v-model="rate"></el-rate>
                <p>奔驰<br><small>e300</small></p>
                <a class="abtn" href="detail.html">租 赁</a>
            </div>
        </div>
        <div class="car">
            <img src="https://img0.baidu.com/it/u=4027132358,3910351501&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500">
            <div>
                <div class="price">￥400<small>元/天</small></div>
                <el-rate v-model="rate"></el-rate>
                <p>宝马<br><small>x5</small></p>
                <a class="abtn" href="detail.html">租 赁</a>
            </div>
        </div>
        <div class="car">
            <img src="https://img2.baidu.com/it/u=1309348727,1481007618&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=398">
            <div>
                <div class="price">￥300<small>元/天</small></div>
                <el-rate v-model="rate"></el-rate>
                <p>本田<br><small>思域</small></p>
                <a class="abtn" href="detail.html">租 赁</a>
            </div>
        </div>
        <div class="car">
            <img src="https://img1.baidu.com/it/u=3526446978,2585459819&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500">
            <div>
                <div class="price">￥300<small>元/天</small></div>
                <el-rate v-model="rate"></el-rate>
                <p>丰田<br><small>卡罗拉</small></p>
                <a class="abtn" href="detail.html">租 赁</a>
            </div>
        </div>
        <div class="car">
            <img src="https://img0.baidu.com/it/u=871710877,900942460&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500">
            <div>
                <div class="price">￥500<small>元/天</small></div>
                <el-rate v-model="rate"></el-rate>
                <p>奔驰<br><small>e300</small></p>
                <a class="abtn" href="detail.html">租 赁</a>
            </div>
        </div>
        <div class="car">
            <img src="https://img2.baidu.com/it/u=1309348727,1481007618&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=398">
            <div>
                <div class="price">￥300<small>元/天</small></div>
                <el-rate v-model="rate"></el-rate>
                <p>本田<br><small>思域</small></p>
                <a class="abtn" href="detail.html">租 赁</a>
            </div>
        </div>
        <div style="width: 100%; text-align: center; margin-top: 10px">
            <el-button type="primary" round>更多车辆</el-button>
        </div>
    </main>

</div>
<script>
    var v = new Vue({
        el : "#app",
        data:{rate:3.5}
    })
</script>
</body>
</html>